<template>
	<div class="conbox" id="uplodscode">
		<view class="uni-padding-wrap uni-common-mt">
			<form>
				<view class="uni-form-item uni-column">
					<span class='require'>*</span>
					<text class="title">真实名字</text>
					<input class="uni-input" :name="reaname" v-model="reaname" placeholder="请输入你的名字"/>
				</view>
				<view class="uni-form-item uni-column">
					<span class='require'>*</span>
					<text class="title">身份证号</text>
					<input class="uni-input" name="IDnum" v-model="IDnum" type="idcard" placeholder="请输入你的身份证号码"/>
				</view>
				<view class="uni-form-item uni-column">
					<span class='require'>*</span>
					<text class="title specal">身份证照片</text>
					<div class='uplodcard'>
						<div class='uploduser'>
									<uploader
									:num="maxCount"
									:imgList="imgList"
									:size="210" class='uplodaccount' ref="uplodf"/>
									<span class='small' ref="uplod">上传正面照</span>
						</div>
						<div class='uploduser'>
							<uploader
								:num="maxCount"
								:imgList="imgLists"
								:size="210" class='uplodaccount' ref="uplods"/>
							<span class='small' ref="uplod">上传反面照</span>
						</div>
					</div>
				</view>
				<view class="uni-form-item uni-column">
					<span class='require'>*</span>
					<text class="title">银行</text>
					<input class="uni-input" name="bankname" v-model="bankname" placeholder="请输入银行名称"/>
				</view>
				<view class="uni-form-item uni-column">
					<span class='require'>*</span>
					<text class="title">银行卡号</text>
					<input class="uni-input" name="banknumber" v-model="banknumber" type="number" placeholder="请输入银行卡号"/>
				</view>
				<view class="uni-form-item uni-column">
					<span class='require'>*</span>
					<text class="title">手机号码</text>
					<input class="uni-input" name="phone" type="number" v-model="phone" placeholder="请输入手机号码"/>
				</view>
				<p class="alert_form">请填写该卡在银行预留的手机号码，验证银行卡是否真实属于您本人</p>
				<view class="uni-form-item uni-column applayatatus">
					<text class="apply_label">审核状态</text>
					<text class="appil_result" :class="{green:status==1,red:status==2}">{{status==0 ?'未审核' :status==1?'审核通过':'审核不通过'}}</text>
				</view>
				<view class="backlab"></view>
			</form>
		</view>
		 <footer>
            <ul class="operation">
                <li @click="reset">重置</li>
                <li @click="savemsg">保存</li>
				<!--<li>
					<button  type="default" formType="reset">重置</button>
				</li>
				<li>
					<button formType="submit">保存</button>
				</li>-->
            </ul>
        </footer>
	</div>
</template>

<script>
import uploader from '@/components/App_uploader'
import { getrealname, sendrealname } from '@/api/payment'
import { idcardReg } from '@/utils/tools/validate'
export default {
	name: 'userAuthentication',
	components: {
		uploader
	},
	data() {
		return {
			imgList: [],
			imgLists: [],
			maxCount: 1,
			content: '',
			owner_user_id: '',
			reaname: '',
			IDnum: '',
			bankname: '',
			banknumber: '',
			phone: '',
			status: 0,
			real_id: 0,
			front_of_id_card: '',
			reverse_of_id_card: '',
			myreg: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.real_id = opcation.real_id
		console.log(opcation)
	},
	mounted() {
		this.getrolemsg()
	},
	methods: {
		getrolemsg() {
			getrealname().then(res => {
				if (res.status == 'success') {
					let lists = res.data
					if (lists.length > 0 || lists.length == undefined) {
						this.real_id = lists.real_id
						this.reaname = lists.real_name
						this.IDnum = lists.self_num
						this.bankname = lists.bank_name
						this.banknumber = lists.bank_card
						this.phone = lists.bank_mobile
						this.status = lists.review_status
						this.front_of_id_card = lists.front_of_id_card
						this.reverse_of_id_card = lists.reverse_of_id_card
						this.imgList[0] = lists.front_of_id_card
						this.imgLists[0] = lists.reverse_of_id_card
					}
				} else {
					this.msg(res.message)
				}
			})
		},
		// 重置
		reset() {
			this.reaname = ''
			this.IDnum = ''
			this.bankname = ''
			this.banknumber = ''
			this.phone = ''
			this.imgList[0] == ''
			this.imgLists[0] == ''
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		savemsg() {
			if (this.reaname == '') {
				this.msg('请输入名字')
			} else if (this.IDnum == '') {
				this.msg('请输入身份证号')
			} else if (this.imgList[0] == '') {
				this.msg('请上传身份证正面照')
			} else if (this.imgLists[0] == '') {
				this.msg('请上传身份证反面照')
			} else if (this.bankname == '') {
				this.msg('请输入银行名称')
			} else if (this.banknumber == '') {
				this.msg('请输入银行卡号')
			} else if (this.phone == '') {
				this.msg('请输入手机号')
			} else if (this.phone.length !== 11) {
				this.msg('请输入正确手机号')
			} else if (!this.myreg.test(this.phone)) {
				this.msg('请输入正确手机号')
			} else {
				let params = {
					real_id: this.real_id,
					real_name: this.reaname,
					self_num: this.IDnum,
					bank_name: this.bankname,
					bank_card: this.banknumber,
					bank_mobile: this.phone,
					front_of_id_card: this.$refs.uplodf.showImgList[0],
					reverse_of_id_card: this.$refs.uplods.showImgList[0]
				}
				sendrealname(params).then(res => {
					if (res.status == 'success') {
						this.msg('提交成功')
						this.getrolemsg()
					} else {
						this.msg(res.message)
					}
				})
			}
		}
	}
}
</script>
<style scoped lang='scss'>
	.uni-padding-wrap{
		width: 750px;
		height: auto;
		padding: 0;
		display: flex;
		background: white;
	}
	#uplodscode .uni-form-item {
		width: 690px;
		margin: 0 30px;
		display: inline-block;
		line-height: 54px;
		border-bottom: 1px solid #eeeeee;
	}
	#uplodscode .uni-form-item:last-child{
		border-bottom:none;
	}
	#uplodscode .title {
		width: 22%;
		float: left;
		display: inline;
		padding-left: 0;
	}
	.require{
		float: left;
		color:red;
		margin-right: 2px;
		padding: 10px 0;
	}
	#uplodscode .specal{
		display: block;
		width: 90%;
	}
	#uplodscode .uni-input {
		width: 64%;
		float: left;
		display: inline;
		margin-top: 8px;
		// margin-left: 200px;
		// margin-top: -70px;
	}
	.uplodcard{
		width: 100%;
		float:left;
		padding-bottom: 15px;
	}
	.uploduser{
		width: auto;
		height: 260px;
		text-align: center;
		float: left;
		margin-left: 20px;
	}
	.uplodaccount{
		width:100%;
		height: 210px;
	}
	#uplodscode .uplodaccount /deep/ .upload-box{
		padding: 0;
	}
	.uploduser .small{
		float: left;
		margin-left: 10%;
		font-size: 20px;
		display:inline;
		margin-top: 5px;
	}
	.uploduser .small:last-child{
		margin-left: 22%;
	}
	 .alert_form{
        color: #999999;
        padding: 10px 30px;
		background: #F5F5F5;
		float: left;
    }
	.apply_label{
		float: left;
		display: inline;
	}
	.appil_result{
		display: inline;
		float: right;
		color: #999999;
		margin-right: 30px;
	}
	.backlab{
		height:132px;
		width:100%;
		float:left;
		background: #F5F5F5;
	}
	.applayatatus{
		padding: 20px 0;
	}
	.green{
		color: #00BD00;
	}
	.red{
		color: #FF5454;
	}
	.operation li{
        height: 100%;
        float: left;
        line-height: 100px;
        font-size: 32px;
        text-align: center;
    }
    .operation li:first-child{
        width: 30%;
    }
    .operation li:nth-child(2){
        color: #3A1B04;
        width: 70%;
        background: #FFD11A;
    }
	button{
		width: 100%;
		height: 100%;
		outline: none;
		background: none;
		text-align: center;
		line-height: 100px;
	}
</style>
